<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>订单分析</title>

<script type="text/javascript" src="../resources/js/contants.js"></script>
<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
<link href="../resources/css/font-awesome.min.css" rel="stylesheet">
<link href="../resources/css/style.min.css" rel="stylesheet">
<link href="../resources/css/dateRange.css" rel="stylesheet">
<link href="../resources/css/bootstrap-select.min.css" rel="stylesheet">
<link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info">公用过滤条件</span>
                    </div>
                    <div class="ibox-content">
                        <span class="font-size-h1">货币类型:
                            <select id="currency_type_select">
                            </select>
                        </span>
                        <span class="font-size-h1">支付方式:
                            <select id="payment_type_select">
                            </select>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>订单数量</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="order_orders">-</span></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>成功支付订单数量</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="order_success_orders">-</span></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>退款订单数量</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="order_refund_orders">-</span></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">到昨日为止</span>
                        <h5>成功支付订单总金额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="order_total_revenue_amount">-</span></h1>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>订单金额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="order_order_amount">-</span></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>成功支付订单金额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="order_revenue_amount">-</span></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>退款订单金额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="order_refund_amount">-</span></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">到昨日为止</span>
                        <h5>退款订单总金额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="order_total_refund_amount">-</span></h1>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div id="demo_title" class="col-sm-12 no-margins">
              <div class="row no-paddings no-margins no-border">
                <div class="col-sm-10 no-margins" style="padding:0px; border:0px;">
                  <div class="ibox no-margins">
                    <div class="ibox-content">
                        <span class="no-margins">选择时间：</span>
                        <button id="time_show_bt" type="button" class="btn btn-default no-margins no-borders no-paddings" style="padding-bottom: 0px">
                            <span id="date1">默认</span>
                            <span class="caret"></span>
                        </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="demo" class="col-sm-12"></div>
            <div id="demo1" class="col-sm-12"></div>
        </div>
    </div>

    <script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../resources/js/dateRange.js"></script>
    <script type="text/javascript" src="../resources/js/bootstrap-select.min.js"></script>
    <!-- highcharts js -->
    <script type="text/javascript" src="../resources/js/highcharts.js"></script>
    <script type="text/javascript" src="../resources/js/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/json2.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script>

    <script type="text/javascript">
        Highcharts.setOptions({
            tooltip: {
                pointFormat: '<span stype="color:{series.color}">{series.name}</span>:<b>{point.y:,0.001f}</b><br/>',
            }
        });
        var startDate = getStartDate();
        var endDate = getEndDate();

        $("#currency_type_select").change(function(){
            var currencyType = $(this).val();
            var paymentType = $("#payment_type_select").val();
            currencyPaymentChange(currencyType, paymentType);
        });

        $("#payment_type_select").change(function(){
            var currencyType = $("#currency_type_selects").val();
            var paymentType = $(this).val();
            currencyPaymentChange(currencyType, paymentType);
        });

        function currencyPaymentChange(currencyType, paymentType) {
        	var sd = date2YmdStr(getYesterDay());
            var ed = sd;
            loadHeadData(sd, ed, currencyType, paymentType);
            loadContent(getStartDate(), getEndDate(), currencyType, paymentType);
        };

        function loadHeadData(sd, ed, currencyType, paymentType) {
            var url = COMMON_PREFIX_URL + "/stats/summary/order?metric=orders,success_orders,refund_orders,order_amount,revenue_amount,refund_amount,total_revenue_amount,total_refund_amount&platform=website";
            url += "&start_date=" + sd + "&end_date=" + ed;
            if (currencyType) {
            	url += "&currenty_type=" + currencyType;
            }
            if (paymentType) {
            	url += "&payment_type=" + paymentType;
            }
            $.get(url, {}, function(data){
                if (data.code == '200' && data.data.length > 0) {
                    var orderData = data.data[0];
                    var orders = orderData["$orders"];
                    if (typeof(orders) != "undefined") {
                        $("#order_orders").html(orders.formatThousands());
                    } else {
                        $("#order_orders").html("-");
                    }
                    var so = orderData["$success_orders"];
                    if (typeof(so) != "undefined") {
                        $("#order_success_orders").html(so.formatThousands());
                    }
                    var ro = orderData["$refund_orders"];
                    if (typeof(ro) != "undefined") {
                        $("#order_refund_orders").html(ro.formatThousands());
                    }
                    var oa = orderData["$order_amount"];
                    if (typeof(oa) != "undefined") {
                        $("#order_order_amount").html(oa.formatThousands());
                    }
                    var rea = orderData["$revenue_amount"];
                    if (typeof(rea) != "undefined") {
                        $("#order_revenue_amount").html(rea.formatThousands());
                    }
                    var rfa = orderData["$refund_amount"];
                    if (typeof(rfa) != "undefined") {
                        $("#order_refund_amount").html(rfa.formatThousands());
                    }
                    var trea = orderData["$total_revenue_amount"];
                    if (typeof(trea) != "undefined") {
                        $("#order_total_revenue_amount").html(trea.formatThousands());
                    }
                    var trfa = orderData["$total_refund_amount"];
                    if (typeof(trfa) != "undefined") {
                        $("#order_total_refund_amount").html(trfa.formatThousands());
                    }
                } else {
                    $("#order_order_amount").html("-");
                    $("#order_orders").html("-");
                    $("#order_success_orders").html("-");
                    $("#order_refund_orders").html("-");
                    $("#order_revenue_amount").html("-");
                    $("#order_refund_amount").html("-");
                    $("#order_total_revenue_amount").html("-");
                    $("#order_total_refund_amount").html("-");
                }
            });
        };

        function loadContent(sd, ed, currencyType, paymentType) {
            var url = COMMON_PREFIX_URL + "/stats/groupBy/order?metric=orders,success_orders,refund_orders,revenue_amount,refund_amount&platform=website&group_by=day";
            url += "&start_date=" + sd + "&end_date=" + ed;
            if (currencyType) {
            	url += "&currenty_type=" + currencyType;
            }
            if (paymentType) {
            	url += "&payment_type=" + paymentType;
            }

            $.get(url, {}, function(data) {
                cleanContent("demo");
                cleanContent("demo1");

                if (data.code == '200') {
                    if (data.data.length == 0) {
                       showNoConnent("demo");
                       return;
                    }

                    var chart = new Highcharts.Chart({
                        chart : {
                            renderTo : 'demo', // 在那个标签上显示，指定id即可
                            type : "column" // 类型
                        },
                        title: {
                            text: "订单数量、成功支付订单数量以及退款订单数量比较图"
                        },
                        xAxis : {
                            title : {
                                text : "日期"
                            }
                        },
                        yAxis : [{
                            min: 0,
                            title : {
                                text : "订单数量"
                            }
                        }],
                        series : []
                    });
                    var chart1 = new Highcharts.Chart({
                        chart: {
                            renderTo: 'demo1',
                            type: 'spline'
                        },
                        title: {
                            text: '成功支付金额和退款金额比较图'
                        },
                        xAxis: {
                        	title : {
                                text : "日期"
                            }
                        },
                        yAxis: {
                            title: {
                                text: '数量'
                            }
                        },
                        series : []
                    });

                    var categories = [];
                    var os = {
                    		name: "订单数量",
                    		data: []
                    };
                    var sos = {
                    		name: "成功支付订单数量",
                    		data: []
                    };
                    var ros = {
                    		name: "退款订单数量",
                    		data: []
                    };
                    var sra = {
                    		name: "成功支付订单金额",
                    		data: []
                    };
                    var rra = {
                    		name: "退款定的金额",
                    		data: []
                    };

                    $.each(data.data, function(i, item) {
                        var day = item["day"];
                        var orders = item["$orders"];
                        var successOrders = item["$success_orders"];
                        var refundOrders = item["$refund_orders"];
                        var revenueAmount = item["$revenue_amount"];
                        var refundAmount = item["$refund_amount"];

                        os["data"].push(orders);
                        sos["data"].push(successOrders);
                        ros["data"].push(refundOrders);
                        sra["data"].push(revenueAmount);
                        rra["data"].push(refundAmount);
                        categories.push(day);
                    });

                    chart.addSeries(os);
                    chart.addSeries(sos);
                    chart.addSeries(ros);
                    chart.xAxis[0].setCategories(categories);
                    chart1.addSeries(sra);
                    chart1.addSeries(rra);
                    chart1.xAxis[0].setCategories(categories);
                    return true;
                } else {
                    showNoConnent("demo", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
                }
                return false;
            }, "json");
        }

        $(document).ready(function(){
            // 加载浏览器基本信息
            var url = COMMON_PREFIX_URL + "/stats/getDimensions?dimensions=currency_type,payment_type";
            $.get(url, {}, function(data){
                if (data.code == '200' && data.data != null && data.data["currency_type"].length > 0) {
                    var str = '<option value="all">all</option>';
                    $.each(data.data["currency_type"], function(i, item) {
                        if (item["currency_name"] != 'all') {
                            str += '<option value="' + item["currency_name"] + '">' + item["currency_name"] + '</option>'
                        }
                    });
                    $("#currency_type_select").html(str);
                    $("#currency_type_select").addClass("selectpicker");
                }

                if (data.code == '200' && data.data != null && data.data["payment_type"].length > 0) {
                    var str = '<option value="all">all</option>';
                    $.each(data.data["payment_type"], function(i, item) {
                        if (item["payment_type"] != 'all') {
                            str += '<option value="' + item["payment_type"] + '">' + item["payment_type"] + '</option>'
                        }
                    });
                    $("#payment_type_select").html(str);
                    $("#payment_type_select").addClass("selectpicker");
                }

                $('.selectpicker').selectpicker();
            });

            var sd = date2YmdStr(getYesterDay());
            var ed = sd;
            loadHeadData(sd, ed, "all", "all");
            loadContent(startDate, endDate, "all", "all");

            // 显示时间控件
            new AE_Date('date1','time_show_bt',function(startDate, endDate){
                loadContent(startDate, endDate, $("#currency_type_select").val(), $("#payment_type_select").val());
            }, startDate, endDate);
        });
        
    </script>
</body>
</html>